<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">
<pre>
    <h3>
        容器：class="media"表示，用于包含所有的媒体对象内容。
        对象：class="media-object"表示,是媒体对象中的图片、视频等。
        主体：class="media-body"表示，通常是图片视频右侧（左侧）的内容，用于描述评价等信息
        标题：class="media-heading"表示，用于描述媒体对象的标题。
    </h3>
</pre>

    <h3>基本示例</h3>
    <div class="media">
        <div class="media-object pull-left">

            <img src="../image/1.png" height="50" width="50"/>
        </div>
        <div class="media-body">
            <h4 class="media-heading">图书</h4>
            <div>
                哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈啊哈哈哈哈哈
            </div>
        </div>
    </div>

    <h4>媒体列表组</h4>
    <ul class="media-list">
        <li class="media">
            <div class="media-object media-left">
                <img src="../image/1.png" height="50" width="50"/>
            </div>
            <div class="media-body">
                <h4 class="media-heading">C++ Primer Plus</h4>
                <div>
                    哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈啊哈哈哈哈哈
                </div>
            </div>
        </li>
        <li class="media">
            <div class="media-object media-left">
                <img src="../image/1.png" height="50" width="50"/>
            </div>
            <div class="media-body">
                <h4 class="media-heading">C++ Primer Plus</h4>
                <div>
                    哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈啊哈哈哈哈哈
                </div>
            </div>
        </li>
        <li class="media">
            <div class="media-object media-left">
                <img src="../image/1.png" height="50" width="50"/>
            </div>
            <div class="media-body">
                <h4 class="media-heading">C++ Primer Plus</h4>
                <div>
                    哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈啊哈哈哈哈哈
                </div>
            </div>
        </li> <li class="media">
        <div class="media-object media-left">
            <img src="../image/1.png" height="50" width="50"/>
        </div>
        <div class="media-body">
            <h4 class="media-heading">C++ Primer Plus</h4>
            <div>
                哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈啊哈哈哈哈哈
            </div>
        </div>
    </li>

    </ul>
</div>
</body>
</html>